<template>
  <el-dialog
    :title="statusId ? '编辑用户' : '创建用户'"
    @close="close"
    :visible.sync="showDialog"
  >
    <el-row type="flex" justify="center">
      <el-form
        v-if="showDialog"
        label-width="140px"
        :model="formData"
        :rules="formRules"
        ref="form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" v-model="formData.username" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入邮箱" v-model="formData.email" />
        </el-form-item>
        <el-form-item v-if="!showId" label="密码" prop="password">
          <el-input placeholder="请输入密码" v-model="formData.password" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input placeholder="请输入角色" v-model="formData.role" />
        </el-form-item>
        <el-form-item label="权限组名称" prop="formOfEmployment">
          <el-select
            v-model="formData.permission_group_id"
            placeholder="请选择"
          >
            <!-- 遍历只能遍历组件的数据 -->
            <el-option
              v-for="item in permissionGroup"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input placeholder="请输入联系电话" v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="formData.introduction"
          />
        </el-form-item>
      </el-form>
    </el-row>
    <el-row type="flex" justify="center">
      <el-button size="small" @click="showDialog = false">取消</el-button>
      <el-button size="small" type="primary" @click="btnOk">确定</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import { addUserApi, getPermissionListApi, editUserApi } from "@/api/houtai";
export default {
  name: "AddUser",
  data() {
    return {
      formData: {
        username: "",
        email: "",
        password: "",
        role: "",
        permission_group_id: "",
        phone: "",
        introduction: "",
      },
      showDialog: false,
      formRules: {
        username: [
          { required: true, message: "用户姓名不能为空", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "用户姓名为2-10位",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "用户姓名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "用户姓名不能为空", trigger: "blur" },
        ],
      },
      permissionGroup: [],
      permissionData: {
        title: "",
      },
      showId: "",
      statusId: "",
    };
  },
  created() {
    this.initPermissionList();
  },
  methods: {
    close() {
      this.formData = {};
    },
    // 创建和编辑事件
    async btnOk() {
      if (this.statusId) {
        // 编辑
        try {
          await this.$message.success("修改用户成功");
        } catch (error) {
          return console.log(error);
        }
        // console.log(this.statusId);
        const res = await editUserApi(this.formData);
        // console.log(res);
        this.$emit("updateList");
        this.showDialog = false;
        this.statusId = "";
        this.showId = "";
      } else {
        // 创建
        try {
          await this.$message.success("新增用户成功");
        } catch (error) {
          return console.log(error);
        }
        await addUserApi(this.formData);
        this.$emit("updateList");
        this.showDialog = false;
      }
    },
    async initPermissionList() {
      const { list } = await getPermissionListApi({
        title: "",
        page: 1,
        pagesize: 10,
      });
      // console.log(list);
      this.permissionGroup = list;
    },
  },
};
</script>
<style scoped>
</style>